<template>
  <div style="width: 50%">
    <div class="card" style="padding: 30px">
      <el-form :model="data.user" label-width="100px" style="padding-right: 50px">
        <el-form-item label="原密码">
          <el-input v-model="data.user.password" show-password />
        </el-form-item>
        <el-form-item label="新密码">
          <el-input v-model="data.user.newPassword" show-password />
        </el-form-item>
        <el-form-item label="确认新密码">
          <el-input v-model="data.user.confirmPassword" show-password />
        </el-form-item>
        <div style="text-align: center">
          <el-button type="primary" @click="save">保存</el-button>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import {reactive} from "vue"
import request from "@/utils/request";
import {ElMessage} from "element-plus";
import router from "@/router";

const data = reactive({
  user: (() => {
      try {
        return JSON.parse(localStorage.getItem('system-user') || '{}');
      } catch (error) {
        console.error('JSON解析失败:', error);
        ElMessage.error('数据解析失败，请联系管理员');
        return {};
      }
    })(),
})

// 检查密码复杂度是否满足要求（包含字母、数字或特殊字符中的至少两种）
const checkPasswordComplexity = (password) => {
  // 检查是否包含字母
  const hasLetter = /[a-zA-Z]/.test(password);
  // 检查是否包含数字
  const hasNumber = /[0-9]/.test(password);
  // 检查是否包含特殊字符
  const hasSpecial = /[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]/.test(password);
  
  // 计算满足的条件数量
  const conditionsMet = [hasLetter, hasNumber, hasSpecial].filter(Boolean).length;
  
  // 返回是否满足至少两种条件
  return conditionsMet >= 2;
}

// 把当前修改的用户信息存储到后台数据库
const save = async () => {
  if (!data.user.password || !data.user.newPassword || !data.user.confirmPassword) {
    ElMessage.error('请填写完整信息')
    return
  }
  if (data.user.newPassword !== data.user.confirmPassword) {
    ElMessage.error('确认新密码错误')
    return
  }
  if (data.user.newPassword.length < 6 || data.user.newPassword.length > 20) {
    ElMessage.error('修改失败，提示：密码长度6-20位')
    return
  }
  if (!checkPasswordComplexity(data.user.newPassword)) {
    ElMessage.error('修改失败，提示：密码必须包含字母、数字或特殊字符中的至少两种')
    return
  }

  try {
    // 显示加载状态
    ElMessage.info('正在修改密码...')
    
    const res = await request.put('/api/users/updatePassword', data.user)
    
    if (res.code === '200') {
      ElMessage.success('修改密码成功')
      // 清空表单
      data.user.password = ''
      data.user.newPassword = ''
      data.user.confirmPassword = ''
    } else {
      ElMessage.error(res.msg || '修改密码失败')
    }
  } catch (error) {
    // 记录错误信息到控制台（非错误级别）
    console.info({
      message: '密码修改错误',
      error: error.message,
      timestamp: new Date().toISOString(),
      type: 'password_update_error'
    })

    // 处理不同类型的错误
    if (error.response) {
      // 服务器响应错误
      const status = error.response.status
      const data = error.response.data
      
      switch (status) {
        case 400:
          ElMessage.error(data.msg || '请求参数错误，请检查输入信息')
          break
        case 401:
          ElMessage.error('身份验证失败，请重新登录')
          // 可以考虑跳转到登录页
          break
        case 403:
          ElMessage.error('权限不足，无法修改密码')
          break
        case 422:
          ElMessage.error(data.msg || '原密码错误或新密码不符合要求')
          break
        case 500:
          ElMessage.error('服务器内部错误，请稍后重试')
          break
        case 503:
          ElMessage.error('服务暂时不可用，请稍后重试')
          break
        default:
          ElMessage.error(data.msg || `修改密码失败 (错误代码: ${status})`)
      }
    } else if (error.request) {
      // 网络错误
      if (error.code === 'ECONNABORTED') {
        ElMessage.error('请求超时，请检查网络连接后重试')
      } else if (error.message.includes('Network Error')) {
        ElMessage.error('网络连接失败，请检查网络设置')
      } else {
        ElMessage.error('网络请求失败，请稍后重试')
      }
    } else {
      // 其他错误
      ElMessage.error('修改密码时发生未知错误，请稍后重试')
    }
  }
}
</script>